<template>
  <div>
    <div class="top">
      <el-carousel :interval="5000" arrow="always" height="100vh">
        <el-carousel-item v-for="item in filmsdata.photos" :key="item">
          <!-- <img class="banneritem" :src="item" alt="" /> -->
          <div class="bck" :style="`background-image:url(${item})`"></div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="footer">
      <h2>
        片名{{ filmsdata.name }} <span>{{ filmsdata.filmType.name }}</span>
      </h2>
      <p>
        {{ filmsdata.category }}
      </p>
      <p>{{ filmsdata.premiereAt }} 上映</p>
      <p>
        {{ filmsdata.nation }} &nbsp;| &nbsp;时长：{{ filmsdata.runtime }}分钟
      </p>
      <p>简介：{{ filmsdata.synopsis }}</p>

      <h3>演职人员：</h3>

      <ul>
        <li v-for="item in filmsdata.actors" :key="item.avatarAddress">
          <img :src="item.avatarAddress" alt="" />
          <p>
            {{ item.name }}
          </p>
          <p>
            {{ item.role }}
          </p>
        </li>
      </ul>
      <router-link :to='`/cinema/${$route.params.id}?name=${filmsdata.name}`'>
        <el-button type="primary"> 前往购票 </el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filmsdata: null,
    };
  },

  async asyncData({ $axios, route }) {
    let filmId = route.params == null ? 5266 : route.params.id;
    let data = await $axios({
      url: `/gateway?filmId=${filmId}&k=1010627`,
      method: "get",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"1606962163804279870816257","bc":"440100"}',
        "X-Host": "mall.film-ticket.film.info",
      },
    });

    let message = data.data.film.premiereAt; //获取当前时间戳
    let newDate = new Date();
    newDate.setTime(message * 1000);
    // console.log(newDate.toLocaleDateString()); // 2014年6月18日
    // console.log(newDate.toLocaleString()); // 2014年6月18日 上午10:33:24
    data.data.film.premiereAt = newDate.toLocaleDateString();

    if (data.data.film !== null) {
      return {
        filmsdata: data.data.film,
      };
    }
  },
};
</script>

<style lang="less" scoped>
div.top {
  .bck {
    height: 100vh;
    width: 100vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}

div.footer {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  h2 {
    line-height: 70px;
    height: 70px;
    font-size: 24px;
    color: #333;
    text-align: center;
    span {
      font-size: 30px;
      color: crimson;
    }
  }

  p {
    line-height: 40px;
    height: 40px;
    font-size: 18px;
    color: #555;
    text-align: center;
    &:nth-last-of-type(1) {
      text-align: left;
      font-size: 14px;
      height: 100%;
    }
  }
  h3 {
    padding-left: 10px;
    margin-top: 20px;
    color: #333;
  }

  ul {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 217px;
        height: 300px;
      }

      p {
        font-size: 16px;
        color: #555;
        height: 30px;
        line-height: 30px;
      }
    }
  }

  .el-button {
    margin: 40px 0;
  }
}
</style>